<template>
    <div class="food-list" v-if="index ===0">
        <van-tree-select
  v-model:main-active-index="activeIndex"
  height="88vw"
  :items="items"
  @click-nav="navClick"
>
  <template #content>
  
<div v-for="(item,index) in subItem" class="item-bg" 
>
    <list-item :item="item" 
    :handleAdd="handleAdd" 
    :handleChange="handleChange"
    :name="item.id" />


</div>
</template>
</van-tree-select>
</div>
    <div v-else>
        {{ foodData.content }}
    </div>
</template>
<script>
import { reactive,toRefs } from "vue";
// import FoodListItem from "./FoodListItem.vue";
import ListItem from "../../../components/ListItem.vue";
export default{
    props:['index','foodData'],
    components:{
        // FoodListItem,
        ListItem,
    },
    setup(props){
        let data = reactive({
            activeIndex:0,
            items :[],
            subItem:[]
        });

        const initData = ()=>{
            let newArray = [];
            props.foodData?.items?.forEach((item,index)=>{
                newArray.push({
                    text:item.text,
                });
                if(data.activeIndex === index){
                data.subItem = item.children;
            }
            });
            data.items = newArray;
        };
        initData();
        const navClick = (i)=>{
            data.activeIndex=i;
            initData();
        };
        const handleAdd=(id)=>{
            data.subItem.forEach((item,index)=>{
                if(item.id === id){
                    item.add=false;
                    item.num+=1;
                }
            })
        };
        const handleChange = (value,detail)=>{
            data.subItem.forEach(item=>{
                if(item.id === detail.name){
                    item.num = value;
                }
            });
        }
        return{
            ...toRefs(data),
            navClick,
            handleAdd,
            handleChange,
        };
    }
}
</script>
<style lang="less" scoped>
.food-list {
  margin-top: 20px;
  .item-bg {
    padding: 10px;
  }
  }
  /deep/ .van-tree-select__item--active {
    color: #ffc400;
  }
  /deep/ .van-sidebar-item--select::before {
    background-color: #ffc400;
  }</style>